<template>
  <div class="search">
    <el-input v-model="keywords" :placeholder="inputPlaceholder" v-if="isSearchKeywords" clearable class="search-keywords"></el-input>
    <slot></slot>
    <div v-if="isRemote && isSelecte" class="search-select">
      <el-select
        v-model="importance"
        :placeholder="selectPlaceholder"
        filterable
        clearable
        remote
        :remote-method="remoteMethod">
        <el-option v-for="(item,index) in selecteList" :key="index" :label="item.name" :value="item.id"/>
      </el-select>
    </div>
    <div v-if="!isRemote && isSelecte" class="search-select">
      <el-select v-model="importance" :placeholder="selectPlaceholder" clearable>
        <el-option
          v-for="(item, index) in selecteList"
          :key="index"
          :label="item.name"
          :value="item.id">
        </el-option>
      </el-select>
    </div>
    <span class="search-slot">
      <slot name="search"></slot>
    </span>
    <el-date-picker
      v-model="value5"
      v-if="isDateRange"
      type="datetimerange"
      align="right"
      :start-placeholder="startDatePlaceholder"
      :end-placeholder="endDatePlaceholder"
      :default-time="['00:00:00', '23:59:59']"
      value-format='timestamp'
      class="search-picker">
    </el-date-picker>
    <el-button v-waves type="primary" class="search-button" @click="sendSearchDate">
      <i class="el-icon-search">&nbsp;搜索</i>
    </el-button>
    <el-button v-waves type="success" class="search-button" @click="sendAdd" v-if="isAdd">
      <i class="el-icon-plus">&nbsp;添加</i>
    </el-button>
    <slot name="button"></slot>
    <el-button v-waves type="warning" class="search-button" @click="sendDownloadData" v-if="isDownload">
      <i class="el-icon-download">&nbsp;导出</i>
    </el-button>
    <el-button v-waves type="danger" class="search-button" @click="sendDelete" v-if="isDeleteAll">
      <i class="el-icon-delete">&nbsp;批量删除</i>
    </el-button>
  </div>
</template>

<script>
import waves from '@/directive/waves'
import { mapState } from 'vuex'

export default {
  data() {
    return {
      importance: '',
      value5: '',
      keywords: ''
    }
  },
  directives: {
    waves
  },
  props: {
    isSearchKeywords: {
      type: Boolean,
      default: true
    },
    isSelecte: {
      type: Boolean,
      default: true
    },
    isDownload: {
      type: Boolean,
      default: false
    },
    isDeleteAll: {
      type: Boolean,
      default: false
    },
    selecteList: {
      type: Array,
      default: null
    },
    isDateRange: {
      type: Boolean,
      default: true
    },
    isAdd: {
      type: Boolean,
      default: false
    },
    selectPlaceholder: {
      type: String,
      default: '--请选择--'
    },
    inputPlaceholder: {
      type: String,
      default: '请输入搜索关键词'
    },
    startDatePlaceholder: {
      type: String,
      default: '开始时间'
    },
    endDatePlaceholder: {
      type: String,
      default: '结束时间'
    },
    remoteMethod: {
      type: Function,
      default: () => {}
    },
    isRemote: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    ...mapState({
      search: state => JSON.parse(state.app.searchData)
    })
  },
  created() {
    if (this.search) {
      this.keywords = this.search.keywords
      this.importance = this.search.selected
      if (this.search.dateStart && this.search.dateEnd) {
        this.value5 = [this.search.dateStart * 1000, this.search.dateEnd * 1000]
      }
      // const data = {
      //   keywords: this.keywords,
      //   selected: this.importance,
      //   dateStart: this.value5 ? (this.value5[0] / 1000) : 0,
      //   dateEnd: this.value5 ? (this.value5[1] / 1000) : 0,
      //   dateRange: this.value5 ? [parseInt((this.value5[0] / 1000)), parseInt((this.value5[1] / 1000))] : 0
      // }
      // this.$store.commit('SEARCH_DATA', data)
    }
  },
  methods: {
    sendSearchDate() {
      const data = {
        keywords: this.keywords,
        selected: this.importance,
        dateStart: this.value5 ? (this.value5[0] / 1000) : 0,
        dateEnd: this.value5 ? (this.value5[1] / 1000) : 0,
        dateRange: this.value5 ? [parseInt((this.value5[0] / 1000)), parseInt((this.value5[1] / 1000))] : 0
      }
      this.$emit('onSearch', data)
      // this.$store.commit('SEARCH_DATA', data)
    },
    sendRemoteMethod() {
      this.$emit('onRemote', this.importance)
    },
    sendAdd() {
      this.$emit('onAdd')
    },
    sendDownloadData() {
      const data = {
        keywords: this.keywords,
        selected: this.importance,
        dateStart: this.value5 ? (this.value5[0] / 1000) : 0,
        dateEnd: this.value5 ? (this.value5[1] / 1000) : 0,
        dateRange: this.value5 ? [parseInt((this.value5[0] / 1000)), parseInt((this.value5[1] / 1000))] : 0
      }
      this.$emit('onDownload', data)
      // this.$store.commit('SEARCH_DATA', data)
    },
    sendDelete() {
      this.$emit('onDelete')
    }
  },
  watch: {
    importance(newValue) {
      const data = {
        keywords: this.keywords,
        selected: newValue,
        dateStart: this.value5 ? (this.value5[0] / 1000) : 0,
        dateEnd: this.value5 ? (this.value5[1] / 1000) : 0,
        dateRange: this.value5 ? [parseInt((this.value5[0] / 1000)), parseInt((this.value5[1] / 1000))] : 0
      }
      this.$emit('onData', data)
    },
    keywords(newValue) {
      const data = {
        keywords: newValue,
        selected: this.importance,
        dateStart: this.value5 ? (this.value5[0] / 1000) : 0,
        dateEnd: this.value5 ? (this.value5[1] / 1000) : 0,
        dateRange: this.value5 ? [parseInt((this.value5[0] / 1000)), parseInt((this.value5[1] / 1000))] : 0
      }
      this.$emit('onData', data)
    },
    value5(newValue) {
      const data = {
        keywords: this.keywords,
        selected: this.importance,
        dateStart: newValue ? (newValue[0] / 1000) : 0,
        dateEnd: newValue ? (newValue[1] / 1000) : 0,
        dateRange: newValue ? [parseInt((newValue[0] / 1000)), parseInt((newValue[1] / 1000))] : 0
      }
      this.$emit('onData', data)
    }
  }
}
</script>

<style lang="scss" scoped>
.search {
  display: flex;
  flex-direction: row;
  margin: 5px 5px 5px 0;
  .search-keywords{
    width: 200px;
  }
  .search-select{
    width: 200px;
    margin-left: 10px;
  }
  .search-picker{
    margin-left: 10px;
    margin-right: 10px;
  }
  .search-slot{
    padding-left: 10px;
  }
}
</style>
